﻿


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket工具</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiAdmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiAdmin/style/admin.css" media="all">
    <style>
        ::-webkit-scrollbar {
            width: 12px !important;
            border-radius: 0px;
        }
    </style>
</head>
<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">在线模拟websocket请求工具</div>
                    <div class="layui-card-body" pad15>

                        <div class="layui-card">
                            <div class="layui-card-body">
                                <form class="layui-form" action="">
                                    <div class="layui-form-item">
                                        <div class="layui-input-group">
                                            <div class="layui-input-split layui-input-prefix">
                                                连接地址
                                            </div>
                                            <input type="text" placeholder="请输入连接地址" id="address" class="layui-input" value="wss://echo.websocket.org" style="width:500px">
                                            <div class="layui-input-suffix layui-btn-group">
                                                <button class="layui-btn layui-btn-primary" lay-on="connect" type="button">连接</button>
                                                <button class="layui-btn layui-btn-primary" lay-on="disconnect" type="button">断开</button>
                                                <button class="layui-btn layui-btn-primary" lay-on="clear" type="button">清空</button>
                                            </div>
                                        </div>
                                        <hr class="ws-space-16">
                                        <div id="content" style="overflow-x: hidden; word-break: break-all;width: 1100px; height: 300px; padding: 6px 10px; border: 1px solid #16b777; box-shadow: 0 0 0 3px rgba(22,183,119,.08);">
                                        </div>
                                        <hr class="ws-space-16">
                                        <div class="layui-input-group">
                                            <textarea class="layui-textarea" placeholder="请输入发送消息" id="msg" rows="15" style="width:700px"></textarea>
                                            <div class="layui-input-suffix layui-btn-group">
                                                <button type="button" class="layui-btn layui-bg-blue" lay-on="send">发送</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../../layuiAdmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../layuiAdmin/', //静态资源所在路径
            version: top.layui.setter.version
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'util'], function () {
            var $ = layui.$,
                util = layui.util;

            var socket;
            var active = {
                connect: function () {
                    socket = new WebSocket($("#address").val());
                    // 连接打开时触发
                    socket.onopen = () => {
                        $("#content").append('<div><span style="color:#38b03f;">连接成功，现在你可以发送信息啦！！！</span></div>');
                    };
                    // 接收到消息时触发
                    socket.onmessage = (event) => {
                        $("#content").append(`<div><span style="color:blue;">服务端回应&nbsp;${util.toDateString(Date.now(), 'yyyy-MM-dd HH:mm:ss')}</span><br><span class="bubble" style="">${event.data}</span></div>`);
                        $('#content').scrollTop($('#content')[0].scrollHeight);
                    };
                    // 连接断开时触发
                    socket.onclose = (event) => {
                        $("#content").append('<div><span style="color:red;">websocket连接已断开!!!</span></div>');
                        layer.msg('断开成功', { icon: 1 });
                    };
                    socket.onerror = function (event) {
                        console.error("WebSocket发生错误");
                        $("#content").append('<div><span style="color:red;">WebSocket发生错误!!!</span></div>');
                    };
                },
                disconnect: function () {
                    if (socket.readyState === WebSocket.OPEN) {
                        socket.close();
                    }
                },
                clear: function () {
                    $("#content").html("");
                },
                send: function () {
                    let msg = $("#msg").val();
                    if (socket.readyState === WebSocket.OPEN) {
                        $("#content").append(`<div><span style="color:green;">你发送的信息&nbsp;${util.toDateString(Date.now(), 'yyyy-MM-dd HH:mm:ss')}</span><br><span>${msg}</span></div>`);
                        $('#content').scrollTop($('#content')[0].scrollHeight);
                        socket.send(msg);
                    }
                }
            }
            // 普通事件
            util.on('lay-on', active);
        });
    </script>
</body>
</html>
